<template>
  <div class="content-box flex column full-width relative-position">
    <div class="padding-20 flex-1 full-width flex column">
      <div class="title flex justify-between items-center">
        <div class="flex items-center">
          <div class="font-14 text-weight-bold">{{title}}</div>
          <div v-if="tips || (remark && remark.length)" class="cursor-pointer margin-l-10">
            <q-icon name="iconfont icontubiao-72" class="font-18 text-grey" @click="showRemark" style="margin-top: -3px"/>
            <q-tooltip max-width="300px" v-if="tips">{{tips}}</q-tooltip>
          </div>
        </div>
        <div><slot name="left"/></div>
      </div>
      <q-separator v-if="hasBor" style="min-height: 1px;height: 1px;max-height: 1px"/>
      <div class="flex-1 full-width"><slot/></div>
    </div>
    <q-separator v-if="btnLabel.length" style="max-height: 1px;min-height: 1px;height: 1px;margin: 0 20px;width: calc(100% - 40px)"/>
    <div class="justify-between items-center flex btn-bottom" v-if="btnLabel.length">
      <div>{{btnLabel}}</div>
      <div class="not-fill-detail" @click="toDetail" :class="{'disable': disable}">
        查看详情
        <q-icon name="iconfont icontubiao2-95" size="16px" style="margin-top: -2px"/>
      </div>
    </div>

    <drawer
      title="说明"
      :visible.sync="dialogVisible"
      width="500px"
      close-on-click-modal>
      <div>
        <div v-for="(item, index) in remark" :key="index" class="margin-b-10" style="line-height: 1.5"><span v-show="showIndex">{{index + 1}}. </span>{{item}}</div>
      </div>
    </drawer>
    <q-inner-loading :showing="loading" style="z-index: 99">
      <q-spinner-gears size="50px" color="primary" />
    </q-inner-loading>
  </div>
</template>

<script>
import Drawer from 'src/components/drawer/drawer'
export default {
  name: 'content-box',
  components: {
    Drawer
  },
  props: {
    tips: {
      type: String,
      default: ''
    },
    title: {
      type: String
    },
    remark: {
      type: Array,
      default: null
    },
    hasBor: {
      type: Boolean,
      default: false
    },
    btnLabel: {
      type: String,
      default: ''
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    disable: Boolean,
    loading: Boolean // loading遮罩
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    toDetail () {
      !this.disable && this.$emit('toDetail')
    },
    showRemark () {
      this.remark !== null && (this.dialogVisible = true)
    }
  }
}
</script>

<style scoped lang="stylus">
.content-box{
  background-color #fff
  border-radius 6px
  line-height 1
  .title{
    margin-bottom 20px;
    font-size 16px
  }
  .btn-bottom{
    padding 17px 20px
  }
}
.not-fill-detail{
  color $primary;
  cursor pointer;
  user-select none;
}
.disable {
  color #999999
  cursor not-allowed
}
</style>
